<template>
  <section class="table">
    <def-table
      :data="tableData"
      :list="tableColumnList"
      v-bind="tableAttrs"
      @cellConfirm="onCellConfirm"
      @rowConfirm="handleRowConfirm"
      @rowDelete="onRowDelete">
    </def-table>
  </section>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { IElTable, TTableConfirm } from '@/base-ui/table/types'

interface ITableData {
  /* id: string | number
  date: string | Date
  name: string
  address: string */
  id: string | number
  account: string
  password: string
}
// 表格数据
const tableData = ref<ITableData[]>([])
// 表格项配置
/* const tableColumnList: ITableColumn[] = [
  {
    label: '时间',
    prop: 'date',
    icon: 'timer'
  },
  {
    label: '姓名',
    prop: 'name',
    icon: 'user',
    editable: true
  },
  {
    label: '地址',
    prop: 'address'
  },
  {
    label: '操作项',
    prop: 'action',
    action: true,
    actionAttrs: {
      plain: true
    }
    // buttons: [{}]
  }
] */

const tableColumnList = [
  {
    element: 'input',
    prop: 'account',
    label: '用户名',
    value: '',
    rules: [
      { required: true, message: '用户名不能为空', trigger: 'blur' },
      { min: 3, message: '长度不低于3位', trigger: 'blur' }
      // { validator: validateAccount, trigger: 'blur' }
    ],
    elementAttrs: {
      type: 'text',
      placeholder: '请输入账号',
      clearable: true
    }
  },
  {
    element: 'input',
    prop: 'password',
    label: '密码',
    value: '',
    rules: [
      { required: true, message: '密码不能为空', trigger: 'blur' },
      { min: 6, max: 15, message: '长度必须在6-15位', trigger: 'blur' }
    ],
    elementAttrs: {
      type: 'password',
      placeholder: '请输入密码',
      clearable: true,
      showPassword: true
    }
  },
  {
    element: 'button',
    prop: 'action',
    action: true,
    layout: {
      xs: 24,
      sm: 24,
      md: 24,
      lg: 24,
      xl: 24
    },
    style: {
      justifyContent: 'flex-end'
    }
  }
]

// 表格配置
const tableAttrs: IElTable = {
  stripe: true,
  border: true
}
setTimeout(() => {
  /* tableData.value = [
    {
      id: '001',
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '002',
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '003',
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '004',
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles'
    }
  ] */
  tableData.value = [
    {
      id: '001',
      account: 'Tom',
      password: 'No. 189, Grove St, Los Angeles'
    },
    {
      id: '002',
      account: 'Tom',
      password: 'No. 189, Grove St, Los Angeles'
    }
  ]
}, 200)
const onCellConfirm = (row: ITableData) => {
  console.log('父组件触发并接受参数 - onCellConfirm', row)
}
const onRowAdd = (row: ITableData) => {
  console.log('行新增处理', row)
}
const handleRowEdit = (row: ITableData, id: string | number) => {
  console.log('行修改处理', row, id)
}
const handleRowConfirm = ({ row, type }: { row: ITableData; type: TTableConfirm }) => {
  console.log('父组件触发并接受参数 - handleRowConfirm', row)
  // 表格新增处理
  if (type === 'add') onRowAdd(row)
  // 表格修改处理
  if (type === 'edit') handleRowEdit(row, row.id)
}
const onRowDelete = (row: ITableData) => {
  console.log('父组件触发并接受参数 - onRowDelete', row)
  const obj = tableData.value
  const idx = obj.findIndex((item: ITableData) => item.id === row.id)
  obj.splice(idx, 1)
  tableData.value = obj
}
</script>

<style scoped lang="scss">
.table {
}
</style>
